<template>
  <div class="mine">
    <nav>
      <van-icon name="wap-nav" @click="move" />
      <p>动态</p>
      <van-icon name="plus" />
    </nav>
    <aside>
      <img src="./1.png" />
      <img src="./2.png" />
      <img src="./3.png" />
      <img src="./4.png" />
      <img src="./5.png" />
    </aside>
    <article>
      <p>我的圈子</p>
      <p>认识的人</p>
      <p>音乐人</p>
      <p>附近的人</p>
      <p>达人</p>
    </article>
    <main>
      <p>我的关注</p>
      <p>全部</p>
      <p>音乐人</p>
      <p>朋友</p>
    </main>

    <div class="product" v-for="item in follow" :key="item.userId">
      <img :src="item.avatarUrl" alt="" />
      <div class="product_r">
        <div>{{ item.nickname }}</div>
        <div>{{ item.signature }}</div>
        <div>{{ item.eventCount }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { uidAPI, focusInfoAPI } from "../../api/MineAPI/mine";
export default {
  data() {
    return {
      follow: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async init() {
      const result = await axios.post(
        "http://192.168.1.107:3000/user/follows?uid=3292266578"
      );
      console.log(result);
      this.follow = result.data.follow;
    },
    async move() {
      await this.$router.push("/sidebar");
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.mine {
  width: 100%;
  background-color: rgb(245, 245, 245);
}
nav {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 20px;
}
nav p {
  flex: 0.7;
  text-align: center;
}
aside {
  width: 100%;
  display: flex;
  margin-top: 20px;
  justify-content: space-evenly;
}
aside img {
  width: 16%;
  cursor: pointer;
}
article {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
article p {
  width: 16%;
  font-size: 14px;
  text-align: center;
  color: gray;
  cursor: pointer;
}
main {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
main p {
  color: grey;
  cursor: pointer;
}
main p:first-child {
  flex: 0.7;
  color: black;
  cursor: default;
}
.product img {
  width: 180px;
  height: 180px;
}
</style>
